<template>
  <div style="margin-top: 50px;width: 1200px;margin: 0 auto;">
    <div class="pd-10">
      <el-input style="width: 300px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>
      <el-button class="ml-5" type="primary" @click="load" size="small" style="width: 100px;">搜索</el-button>
      <el-button class="ml-5" type="warning" @click="reset" size="small">重置</el-button>
    </div>
    <div style="float: right">
      <el-button size="medium" type="success" @click="outBlogHome">前往主站</el-button>
    </div>
    <el-card  style="margin: 10px 0; background: #409eff; margin-top: 50px">
      <div style="text-align: center">
        <h1>文章中心</h1>
      </div>
      <el-card style="padding: 10px 0; margin: 30px 0; border-bottom: 1px dashed #eee" v-for="item in tableData" :key="item.id">
        <div class="pd-10 textHo" style="cursor: pointer;" @click="$router.push('/front/articleDetail?id='+item.id)">{{item.name}}</div>
        <div style="float: right">
          <div class="textHo" style="display: inline-block; cursor: pointer;">
            <i class="el-icon-user"></i>
            <span>{{item.user}}</span>
          </div>
          <div style="display: inline-block; margin-left: 20px; cursor: pointer;" class="textHo">
            <i class="el-icon-time"></i>
            <span>{{item.time}}</span>
          </div>
        </div>
      </el-card>

    </el-card>

    <div style="padding: 10px 0;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>



  </div>
</template>

<script>

import Load from "@/common/Load";


export default {
  name: "Article",
  components:{
    Load
  },
  data(){
    return{
      tableData: [], //分页数据
      total: 0, //总条数
      pageNum: 0,
      pageSize: 5,
      form: {}, //表格数据
      name: "", //查询
      multipleSelection: [], //多选删除
      dialogFormVisible: false, //新增按钮
      teachers: [],
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):{},
      content: '',  //文章内容
      MdViewDialogVis: false //文章显示
    }
  },
  created() {
    this.load();
  },
  methods:{
    //显示md文档
    MdView(content){
      this.content = content;
      this.MdViewDialogVis = true
    },
    selectCourse(courseId){
        this.request.post("/course/studentCourse",{
            studentId: this.user.id,
            courseId: courseId
        }).then(res=>{
          if(res.code === "200"){
            this.$message.success("添加成功")
          }else {
            this.$message.error(res.msg)
          }
        })
    },
    //分页请求
    load(){
      this.request.get("/article/page",{
        params:{
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
        }
      }).then(res =>{
        if(res.code === "200"){
          this.tableData = res.data.data
          this.total = res.data.total
        }else {
          this.$message.error(res.msg)
        }
      })

      //查询字段为
      this.request.get("/user/role/ROLE_TEACHER").then(res =>{
        if(res.code === "200"){
          this.teachers = res.data
        }else {
          this.$message.error(res.msg)
        }
      })

    },
    //分页方法
    handleSizeChange(pageSize) {
      this.pageSize=pageSize;
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.load()
    },
    //重置搜索框
    reset(){
      this.name = "";
      this.load()
    },
    //新增按钮
    handleAdd(){
      this.dialogFormVisible = true;
      this.form = {}
    },
    //编辑按钮
    handleEdit(row){
      this.form = row
      this.dialogFormVisible = true
    },
    //确定新增
    save(){
      this.request.post("/article", this.form).then(res=>{
        if(res.code ==="200"){
          this.$message.success(res.data)
          this.form ={}
          this.dialogFormVisible = false;
          this.load()
        }else {
          this.$message.error(res.msg)
        }
      })
    },

    //取消按钮
    cancel() {
      this.dialogFormVisible=false
      this.load()
    },

    //导入成功的回调
    handleFileUploadSuccess(res){
      this.load();
      this.$message.success("上传成功")
    },
    //下载连接
    download(url){
      window.open(url);
    },
    changeEnable(row){
      row.enable = row.enable ===1? 0: 1;
      this.request.post("/article",row).then(res=>{
          if (res.code === "200"){
            this.$message.success("操作成功")
          } else {
            this.$message.error("操作失败")
          }
      })
    },
    outBlogHome(){

     this.$router.push({
       name: "Load",
       params: {
         time: 3000,
         to: "/NewBK"
       }
     })
    }

  }
}
</script>

<style scoped>
.textHo:hover{
  color: #3a8ee6;
}
</style>